<template>
  <div class="table-box">
    <el-table
      :data="articleList"
      empty-text="暂无内容"
      row-class-name="row"
      cell-class-name="column"
      header-row-class-name="row"
      header-cell-class-name="column"
      style="width: 100%; background-color: transparent"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column show-overflow-tooltip prop="title" class-name="title" label="标题">
        <template #default="{ row }">
          <p class="title_cell" @click="goDetail(row.id)">{{ row.title }}</p>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="category_name" label="分类" width="100" />
      <el-table-column show-overflow-tooltip prop="sub_title" label="副标题" />
      <el-table-column show-overflow-tooltip prop="content" label="内容" />
      <el-table-column show-overflow-tooltip prop="create_time" label="创建时间">
        <template #default="scope">
          <span>{{ dayjs(scope.row.create_time).format('YYYY-MM-DD HH:mm:ss') }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="update_time" label="更新时间">
        <template #default="scope">
          <span>{{ dayjs(scope.row.update_time).format('YYYY-MM-DD HH:mm:ss') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="170">
        <template #default="scope">
          <el-tooltip class="box-item" effect="dark" content="修改" placement="top">
            <el-button
              v-permission="username"
              type="primary"
              size="small"
              @click="editBlog(scope.row)">
              <span class="iconfont icon-xiugai"></span>
            </el-button>
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="scope.row.top ? '取消置顶' : '置顶'"
            placement="top">
            <el-button
              v-permission="username"
              :type="scope.row.top ? 'success' : ''"
              size="small"
              @click="toTopBlog(scope.row)">
              <span class="iconfont icon-zhiding2"></span>
            </el-button>
          </el-tooltip>
          <deleteBtn :showBtn="false" @confirm="deleteC(scope.row)">
            <template #default>
              <el-button v-permission="username" size="small">
                <span class="iconfont icon-shanchu"></span>
              </el-button>
            </template>
          </deleteBtn>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="pagination-box df jc-c">
    <el-pagination
      small
      background
      layout="prev, pager, next"
      :total="total"
      :hide-on-single-page="true"
      @change="pageChange" />
  </div>
  <el-drawer v-model="showModal" :title="title" direction="rtl" size="70%" :destroy-on-close="true">
    <div class="demo-drawer__content">
      <edit-article :currentId="currentId" @getListFun="getListFun"></edit-article>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
  import { deleteBlog, topBlog } from '@/apis/article';
  import editArticle from '@/components/blog/edit-article.vue';
  import deleteBtn from '@/components/delete-btn.vue';
  import { dayjs } from 'element-plus';
  import type { IBlog } from '@/apis/type';
  import useBlogList from '@/hooks/useBlogList';
  import { useUserStore } from '@/stores/userStore';
  const { username } = useUserStore().getUser();
  const { showModal, articleList, getListFun, pageChange, total, goDetail } = useBlogList();

  const currentId = ref();
  // 修改博客
  const editBlog = (item: IBlog) => {
    showModal.value = true;
    currentId.value = item.id;
  };
  // 置顶博客
  const toTopBlog = async (item: IBlog) => {
    let tip = item.top ? '取消置顶' : '置顶成功';
    item.top = item.top ? 0 : 1;
    const res = await topBlog({ id: item.id, top: item.top });
    if (res.code == 200) {
      getListFun();
      ElMessage.success(tip);
    }
  };
  // 删除博客
  const deleteC = async (item: IBlog) => {
    const res = await deleteBlog({ id: item.id });
    if (res.code == 200) {
      getListFun();
      ElMessage.success(res.msg);
    }
  };
  // 删除选中
  const deleteAll = async () => {
    if (ids.length <= 0) return ElMessage.error('请先选中博文');
    ElMessageBox.confirm('确认删除吗?', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'info'
    }).then(async () => {
      const res = await deleteBlog({ id: ids.join(',') });
      if (res.code == 200) ElMessage.success(res.msg);
      getListFun();
    });
  };
  // 选中
  let ids: Array<number | string> = [];
  const handleSelectionChange = async (val: Array<IBlog>) => {
    ids = [];
    val.map(item => {
      ids.push(item.id);
    });
  };
  // 新增
  const title = ref('修改博客');
  const addArticle = () => {
    showModal.value = true;
    title.value = '新增博客';
    currentId.value = '';
  };
  // 暴露方法
  defineExpose({
    deleteAll,
    addArticle
  });
</script>

<style lang="scss" scoped>
  .table-box {
    margin-bottom: 20px;
  }
  .title {
    color: red;
  }
  /* 重置table主题色 */
  ::v-deep(.row),
  ::v-deep(.column) {
    background-color: var(--bg-color) !important;
    color: var(--text-color);
    border-bottom: #fff !important;
  }
  ::v-deep(.row:hover) {
    background-color: var(--bg-color-reverse) !important;
    border-bottom: #fff !important;
    color: var(--text-color);
  }
  ::v-deep(.el-table__inner-wrapper)::before {
    /* 去除下边框 */
    height: 0;
  }
  .title_cell {
    cursor: pointer;
    color: blueviolet;
  }
</style>
